<template>
  <!-- 授权弹窗 -->
  <BaseModal
    class="AuthModal-container"
    destroyOnClose
    v-on="$listeners"
    v-bind="$attrs"
    :width="800"
    title="授权"
    :confirmLoading="loading.isSubmit"
    @ok="handleSubmit"
  >
    <div class="AuthModal-content">
      <div class="left-panel">
        <RoleTree @select="handleRoleSelected" @loadNode="handleRoleSelected"/>
      </div>
      <div class="right-panel">
        <a-transfer
          :list-style="{ width: '220px', height: '500px' }"
          :data-source="sourceData"
          :target-keys="targetKeys"
          :selected-keys="selectedKeys"
          :render="(item) => item.title"
          @change="handleTransferChanged"
          @selectChange="handleSelectChange"
        />
      </div>
    </div>
  </BaseModal>
</template>

<script>
import RoleTree from './RoleTree.vue'
import BaseModal from '@/components/BaseModal'
export default {
  name: 'AuthModal',
  components: {
    BaseModal,
    RoleTree,
  },
  data() {
    return {
      loading: {
        isSubmit: false,
      },
      sourceData: [],
      targetKeys: [],
      selectedKeys: [],
    }
  },
  methods: {
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
    },
    handleTransferChanged(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    handleRoleSelected(node) {
      if (node.dataRef.children) {
        this.sourceData = node.dataRef.children.map((item) => {
          return {
            key: item.id,
            title: item.fullName,
          }
        })
      } else {
        this.sourceData = []
      }
    },
    handleSubmit() {},
  },
}
</script>

<style lang="less" scoped>
.AuthModal-container {
}
.AuthModal-content {
  display: flex;
  .left-panel {
    margin-right: 20px;
    width: 30%;
  }
  .right-panel {
    flex: auto;
  }
}
</style>